﻿/// <reference path = "Base.ts" />
namespace VantCellTypes {
    interface INumberPickerCellTypeParam extends IInputBaseParam {
        NumberPickerConfig: INumberPickerConfig;
        maxlength: any;
        convertToNumber: boolean;
    }
    interface INumberPickerConfig {
        title: string;
        extraKey1: any;
        extraKey2: any;
        closeButtonText: string;
        deleteButtonText: number;
        randomKeyOrder: boolean;
        rightPanel: boolean;
        hideOnClickOutside: boolean;
    }

    export class NumberPickerCellType extends InputBase<INumberPickerCellTypeParam> {
        public setDataSource(dataSource) {
            return this.vue.setOptions(dataSource);
        }

        public onPageLoaded(info: Forguncy.Plugin.CellTypeInfo) {
            const self = this;
            const cellType = this.cellType;
            const config = cellType.NumberPickerConfig;
            const input = this.getInputTemplate(`:maxlength="maxlength" @click="onClick" @change="onChange" clear-trigger="always" @clear="onClear"`);
            const option = {
                el: "#" + this.uId,
                template: `
<div class="fgc-vant-inputContainer">
    ${input}
    <van-number-keyboard
        v-model="value"
        class="fgc-field-disable-click"
        :title="title"
        :show="show"
        :extraKey="extraKey"
        :maxlength="maxlength"
        :close-button-text="closeButtonText"
        :delete-button-text="deleteButtonText"
        :random-key-order="randomKeyOrder"
        :hide-on-click-outside="hideOnClickOutside"
        :theme="theme"
        teleport="body"
        @blur="onFinish"
        @input="onInput"
        @delete="onDelete"
        @close="onFinish"
    />
</div>`,
                data() {
                    const baseData = self.getData(cellType);

                    const data = {
                        show: false,
                        extraKey: <any>"",
                        theme: "default",
                        maxlength: self.getMaxLength(),
                    };
                    if (config.extraKey1 && config.extraKey2) {
                        data.extraKey = [config.extraKey1, config.extraKey2];
                    }
                    else if (config.extraKey1) {
                        data.extraKey = config.extraKey1;
                    }
                    if (config.rightPanel) {
                        data.theme = "custom";
                    }

                    config.title = config.title ?? undefined;
                    config.closeButtonText = config.closeButtonText ?? undefined;
                    config.deleteButtonText = config.deleteButtonText ?? undefined;
                    config.randomKeyOrder = !!config.randomKeyOrder;
                    config.hideOnClickOutside = !!config.hideOnClickOutside;

                    return {
                        value: "",
                        ...baseData,
                        ...config,
                        ...data,
                    };
                },
                methods: this.getDefaultMethods({
                    getValue() {
                        let number = this.value;
                        if (!self.isEmpty(number) && cellType.convertToNumber) {
                            number = Number(number);
                            number = isNaN(number) ? "" : number;
                        }
                        return number;
                    },
                    setValue(value) {
                        let number = value;
                        if (!self.isEmpty(value) && cellType.convertToNumber) {
                            number = Number(value);
                            number = isNaN(number) ? "" : number;
                        }
                        this.value = number;
                    },
                    onFinish() {
                        this.show = false;
                        self.commitValue();
                        self.validate();
                    },
                    onClear() {
                        this.onChange();
                    },
                    onInput() {
                        self.hideValidateTooltip();
                    },
                    onDelete() {
                        self.hideValidateTooltip();
                    },
                    onClick() {
                        if (!self.isReadOnly() && !self.isDisabled()) {
                            this.show = true;
                        }
                    },
                    onChange(value) {
                        this.value = value ?? "";
                        this.onFinish();
                    }
                }),
                mounted() {
                    self.setFontToInputDom(this);

                    $(".van-field__control", self.container).attr("readonly", "readonly");
                },
            };

            this.createVueApp(option);

            this.onDependenceCellValueChanged(() => {
                if (this.isFormula(cellType.maxlength)) {
                    this.vue.maxlength = self.getMaxLength();
                }
            });

            super.onPageLoaded(info);
        }
        private getMaxLength() {
            const maxlength = this.cellType?.maxlength;
            const max = this.calcNumber(this.evaluateFormula(maxlength));
            return max ? max : undefined;
        }
        public ShowPopup() {
            this.vue.onClick();
        }
    }
}

Forguncy.Plugin.CellTypeHelper.registerCellType("Vant.CellTypes.NumberPicker, Vant", VantCellTypes.NumberPickerCellType);